<template>
  <div class="pageIndexFeaturedWrapper">
    <page-index-featured-dialog v-model="dialogVisible" :data="dialogData" :position="dialogPosition"
                  :width="dialogDataWidth" :height="dialogDataHeight" @change="queryData"/>
    <div class="inner">
      <xum-title title="数据修改" :title-span="8">
        <el-radio v-model="type" :label="1">查看</el-radio>
        <el-radio v-model="type" :label="2">修改</el-radio>
        <el-button size="small" icon="el-icon-search" type="info"
                   :loading="queryLoading" @click="queryData">刷新</el-button>
      </xum-title>
      <el-row class="top" :gutter="32">
        <el-col :md="18" :sm="24" :xs="24">
          <el-row :gutter="32">
            <el-col :span="24" class="itemWrapper">
              <div class="card">
                <good-box1 class="boxItem" :click-enable="false" v-bind="data['one']"/>
                <div class="maskMenuWrapper" v-if="type === 2">
                  <div class="maskMenu">
                    <div class="btnWrapper">
                      <el-button type="primary" :disabled="queryLoading"
                                 @click="handleChange('one', 870, 255)">修改</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :md="14" :xs="24" class="itemWrapper">
              <div class="card">
                <good-box1 class="boxItem" :click-enable="false" v-bind="data['two']"/>
                <div class="maskMenuWrapper" v-if="type === 2">
                  <div class="maskMenu">
                    <div class="btnWrapper">
                      <el-button type="primary" :disabled="queryLoading"
                                 @click="handleChange('two', 506, 255)">修改</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :md="10" :xs="24" class="itemWrapper">
              <div class="card">
                <good-box1 class="boxItem" :click-enable="false" v-bind="data['three']"/>
                <div class="maskMenuWrapper" v-if="type === 2">
                  <div class="maskMenu">
                    <div class="btnWrapper">
                      <el-button type="primary" :disabled="queryLoading"
                                 @click="handleChange('three', 352, 255)">修改</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :md="6" :sm="24" :xs="24" class="itemWrapper">
          <div class="card">
            <good-box1 class="boxItem" style="height:540px" :click-enable="false" v-bind="data['four']"/>
            <div class="maskMenuWrapper" v-if="type === 2">
              <div class="maskMenu">
                <div class="btnWrapper">
                  <el-button type="primary" :disabled="queryLoading"
                             @click="handleChange('four', 275, 540)">修改</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row class="bottom" :gutter="30">
        <el-col :md="12" :sm="24" :xs="24" class="itemWrapper">
          <div class="card">
            <good-box1 class="boxItem" :click-enable="false" v-bind="data['five']"/>
            <div class="maskMenuWrapper" v-if="type === 2">
              <div class="maskMenu">
                <div class="btnWrapper">
                  <el-button type="primary" :disabled="queryLoading"
                             @click="handleChange('five', 584, 255)">修改</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :md="12" :sm="24" :xs="24" class="itemWrapper">
          <div class="card">
            <good-box1 class="boxItem" :click-enable="false" v-bind="data['six']"/>
            <div class="maskMenuWrapper" v-if="type === 2">
              <div class="maskMenu">
                <div class="btnWrapper">
                  <el-button type="primary" :disabled="queryLoading"
                             @click="handleChange('six', 584, 255)">修改</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="24" class="itemWrapper">
          <div class="card" style="height: 155px;">
            <good-box1 style="height: 155px;" class="boxItem" :click-enable="false"
                       v-bind="data['seven']"/>
            <div class="maskMenuWrapper" style="padding-bottom: 0;" v-if="type === 2">
              <div class="maskMenu">
                <div class="btnWrapper">
                  <el-button type="primary" :disabled="queryLoading"
                             @click="handleChange('seven', 870, 155)">修改</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import GoodBox1 from '@/components/good/GoodBox1'
import XumTitle from '@/components/XumTitle'
import PageIndexFeaturedDialog from '@pages/page/part/pageIndexFeatured/PageIndexFeaturedDialog'
import { queryFeaturedVO } from '@/api/ApiPageIndex'
import { ResultCode } from '@/constants/constants'
export default {
  name: 'PageIndexFeatured',
  components: { PageIndexFeaturedDialog, XumTitle, GoodBox1 },
  data () {
    return {
      type: 2,
      queryLoading: false,
      dialogVisible: false,
      dialogData: {},
      dialogPosition: '',
      dialogDataWidth: 0,
      dialogDataHeight: 0,
      data: {
        one: {},
        two: {},
        three: {},
        four: {},
        five: {},
        six: {},
        seven: {}
      }
    }
  },
  mounted () {
    this.queryData()
  },
  methods: {
    getInitData () {
      return {
        one: {},
        two: {},
        three: {},
        four: {},
        five: {},
        six: {},
        seven: {}
      }
    },
    convertData (list) {
      const data = {}
      if (list && typeof list === 'object') {
        list.forEach(item => {
          const position = item['position']
          if (position) {
            data[position] = item
          }
        })
      }
      return data
    },
    queryData () {
      if (this.queryLoading) {
        return
      }
      this.queryLoading = true
      queryFeaturedVO(data => {
        if (data && data.code === ResultCode.OK) {
          data = data.object
          let temp = this.getInitData()
          if (data && typeof data === 'object' && data.length > 0) {
            const convert = this.convertData(data)
            temp = Object.assign(temp, convert)
          }
          this.data = temp
        }
      }, () => {
        this.queryLoading = false
      })
    },
    /**
     * 打开编辑对话框
     * @param {String} position 位置
     * @param {Number} width 数据展示宽度
     * @param {Number} height 数据展示高度
     */
    handleChange (position, width, height) {
      const data = this.data[position]
      this.dialogData = data || {}
      this.dialogPosition = position
      this.dialogDataWidth = width
      this.dialogDataHeight = height
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.pageIndexFeaturedWrapper{
  .inner{
    margin: 0 20px 20px;

    .bottom{
      margin-top: 20px;
    }

    .itemWrapper{
      position: relative;

      .card{
        width: 100%;
        height: 100%;

        .boxItem{
          margin-bottom: 30px;
          height: 255px;
          border: 1px black solid;
        }

        .maskMenuWrapper{
          display: none;
          visibility: hidden;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          padding: 0 16px 30px;

          .maskMenu{
            width: 100%;
            height: 100%;
            background: #dddddd99;
            padding: 10px 10px 20px;
            position: relative;
            text-align: center;

            .btnWrapper{
              position: absolute;
              width: 100%;
              height: 40px;
              top: 42%;
              left: 0;
            }

          }
        }
      }

      .card:hover{
        .maskMenuWrapper{
          display: block;
          visibility: visible;
        }
      }
    }

  }
}
</style>
